import React, { useEffect } from 'react'
import { Button, Modal, Form, Input } from 'antd';
import axios from 'axios';

const CreateCategories = (props) => {
    const [form] = Form.useForm();
    const hideModal = () => {
        props.setCreateOpen(false);
    };
    const modelOk = () => {
        form.validateFields().then((values) => {
            onSubmit(values);
        }).catch(errorInfo => {
            console.log("errorInfo", errorInfo)
        });
        console.log(form)
    };
    const onSubmit = (values) => {
        saveAndGet(values);
    };
    const saveAndGet = (values) => {
        axios.post(`http://192.168.2.3:3000/categories`, values)
            .then((res) => {
                console.log(res);
            }).catch((err) => {
                console.log(err);
            });
    };
    return (
        <>
            <Modal
                title="Modal"
                open={props.createOpen}
                onOk={modelOk}
                onCancel={hideModal}
                okText="确认"
                cancelText="取消"
            >
                <Form
                    form={form}
                    layout="vertical"

                >
                    <Form.Item
                        label="分类名称"
                        name="title"
                        rules={[{ required: true, message: '请输入分类名称' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="分类值"
                        name="value"
                        rules={[{ required: true, message: '请输入分类值' }]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};
export default CreateCategories;
